<template>
  <div style="margin-top:2.5rem;margin-bottom:3.5rem" class="jz_list">
    <div class="jz_c1" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
      <div v-for="item in yuyueList " :key="item.id">
        <p>
          <span v-show="showaveter == 'S'">
            <i v-if="item.DOCTOR_PIC_URL == '' || item.DOCTOR_PIC_URL == null || item.DOCTOR_PIC_URL == 'undefined'" class="iconfont icon-yonghu"></i>
            <img v-else :src="root+item.DOCTOR_PIC_URL" alt="">
          </span>
          <span>
            <p style="margin:0">医生信息：{{item.DOCTOR_NAME}}&nbsp;{{item.ZYDJ}}</p>
            <p style="margin:0">详细信息：{{item.SSKBMC}}&nbsp;{{item.PRE_TYPE}}&nbsp;{{item.SSYYMC}}</p>
          </span>
        </p>
        <p>患者信息：{{item.PATIENT_NAME}} {{item.PATIENT_AGE}}岁  {{item.PATIENT_ADDR}} </p>
        <p>候诊时间：{{item.PRETIME}}</p>
        <p>就诊状态：{{item.STATUS | filterYuYueStatus}}
        <p>
          <span>预约挂号 费用：￥{{item.PRE_COST}}元</span>
          <span style="color:#26a2ff;float:right" @click="goYuyuedetail(item)">查看详情</span>
        </p>
      </div>
      <p class="loadingT">{{loadingText}}</p>
    </div>
  </div>
</template>

<script>
const { config } = window;
export default {
  data() {
    return {
      showaveter: `${config.SHOWAEVTER}`,
      yuyueList: [],
      busy: true,
      loadingText: '',
      page: 1,
      DATA: {},
      tq: this.getData(),
      ts: this.newStore(),
      root: `${config.APIRoot}/doctor`,
    };
  },
  created() {
    document.title = '预约挂号';
    this.getYuyuelist(true);
  },
  methods: {
    loadMore() {
      this.busy = true;
      setTimeout(() => {
        this.page += 1;
        this.getYuyuelist(true);
      }, 500);
    },
    goYuyuedetail(item) {
      this.$router.push({
        path: '/yuyue/yuyueDetail',
        query: {
          item,
        },
      });
    },

    getYuyuelist(flag) {
      this.DATA = {
        rowsperpage: '10',
        page: `${this.page}`,
        ordercolumn: 'pre_time',
        ordertype: 'desc',
      };
      this.tq.getYuyuelist(this.DATA).then((ts) => {
        if (flag) {
          this.yuyueList = this.yuyueList.concat(ts.d.DATAOBJ.DATA);
          if (ts.d.DATAOBJ.DATA.length == 0) {
            this.busy = true;
            this.loadingText = '暂无更多数据';
          } else {
            this.busy = false;
            this.loadingText = '加载中...';
          }
        } else {
          this.yuyueList = ts.d.DATAOBJ.DATA;
          this.busy = false;
        }
      });
    },
    // getYuyuelist() {
    //   const res = JSON.stringify({
    //     OTRequest: {
    //       VERSION: '1.0',
    //       TN: 'F27.APP.05.08',
    //       CLIENTID: 'YLAPP',
    //       RYBID: 'PAT',
    //       TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
    //       DATA: {
    //         rowsperpage: '100',
    //         page: '1',
    //         ordercolumn: 'pre_time',
    //         ordertype: 'desc',
    //       },
    //     },
    //   });
    //   this.spost(this.ts, '/doctor/AppMainServlet.ap', {
    //     '': res,
    //   }).then((ts) => {
    //     console.log(ts.d);
    //     this.yuyueList = ts.d.DATAOBJ.DATA;
    //   });
    // },
  },
  filters: {
    // f-预约失败 s-预约成功 c-取消预约 v-就诊
    filterYuYueStatus(status) {
      if (!status) return '';
      let re;
      switch (status) {
        case 'f':
          re = '预约失败';
          break;
        case 's':
          re = '预约成功';
          break;
        case 'c':
          re = '取消预约';
          break;
        case 'v':
          re = '就诊';
          break;
        default:
          return '';
      }
      return re;
    },
  },
};
</script>

<style lang="stylus" scoped>
.section_con8
  p
    &:first-child
      line-height 2rem
.loadingT
  text-align: center;
  color: #3190e8;
.jz_c1::-webkit-scrollbar
    display none
.jz_list
    font-size 1rem
    p
        height 2rem
        line-height 2rem
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
.jz_c1
    background #f1f1f1
    padding 0.3rem 0
    div
        background #fff
        margin-bottom .4rem
    img
        width 4rem
        height 4rem
        border-radius 50%
    p
        margin 0 1rem
        &:nth-child(1)
            height 4rem
            line-height 4rem
            border-bottom 1px solid #ccc
            span
                display inline-block
                float left
                &:first-child
                    text-align center
                    background #ccc
                    border-radius 50%
                    height 4rem
                    width 4rem
                    line-height 4rem
                    margin-top 0.5rem
                &:last-child
                    max-width 75%
                    p
                        height 2rem
                        line-height 2rem
                        border none
                        padding 0
                        &:last-child
                            font-size 0.8rem
                            color #aaa

        &:nth-child(3)
            box-shadow none
            color #aaa
            font-size 0.9rem
        &:nth-child(4)
            color #aaa
            font-size 0.9rem
        &:last-child
          color #aaa
          font-size 0.9rem
</style>

